<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">Base64 编解码工具</a-typography-title>
      
      <!-- 输入区域 -->
      <a-form layout="vertical">
        <a-form-item>
          <a-textarea
            v-model:value="inputText"
          :placeholder="mode === 'encode' ? '请输入要编码的文本...' : '请输入要解码的Base64文本...'"
            :rows="6"
            :auto-size="{ minRows: 6, maxRows: 12 }"
            class="font-mono"
          />
        </a-form-item>

      <!-- 操作按钮 -->
        <a-form-item>
          <a-space>
            <a-radio-group v-model:value="mode" button-style="solid">
              <a-radio-button value="encode">编码</a-radio-button>
              <a-radio-button value="decode">解码</a-radio-button>
            </a-radio-group>
            <a-button type="primary" @click="convert">
          转换
            </a-button>
          </a-space>
        </a-form-item>

      <!-- 结果区域 -->
        <template v-if="outputText || errorMessage">
          <a-divider>转换结果</a-divider>
          
          <a-alert
            v-if="errorMessage"
            type="error"
            :message="errorMessage"
            class="mb-4"
          />

          <a-space v-if="outputText" direction="vertical" class="w-full">
            <div class="flex justify-end">
              <a-tooltip :title="copied ? '已复制！' : '复制到剪贴板'">
                <a-button
                  type="text"
            @click="copyToClipboard"
                  :icon="copied ? h(CheckOutlined) : h(CopyOutlined)"
                >
                  {{ copied ? '已复制' : '复制' }}
                </a-button>
              </a-tooltip>
        </div>
            <a-card class="w-full bg-gray-50 dark:bg-gray-700">
              <pre class="font-mono whitespace-pre-wrap break-all">{{ outputText }}</pre>
            </a-card>
          </a-space>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const inputText = ref('');
const outputText = ref('');
const errorMessage = ref('');
const copied = ref(false);
const mode = ref<'encode' | 'decode'>('encode');

const convert = () => {
  if (!inputText.value) {
    errorMessage.value = '请输入要转换的文本';
    outputText.value = '';
    return;
  }

  try {
    if (mode.value === 'encode') {
      outputText.value = btoa(inputText.value);
    } else {
      outputText.value = atob(inputText.value);
    }
    errorMessage.value = '';
  } catch (err) {
    errorMessage.value = mode.value === 'encode' 
      ? '编码失败，请检查输入文本' 
      : '解码失败，请确保输入的是有效的Base64文本';
    outputText.value = '';
  }
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    message.success('复制成功！');
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    message.error('复制失败，请重试');
    console.error('复制失败:', err);
  }
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}

.dark .ant-card {
  background-color: #1f2937;
}
</style> 